<template>
  <div style="width: 100%; height: 30px"></div>
  <el-scroll>
    <div class="list">
      <div
        class="content-wrapper green"
        v-for="item in list"
        :key="item.id"
      >
        <div class="border"></div>
        <div class="title">
          <span class="t1">{{ item.fileName }}</span>
          <span
            class="iconfont icon-shanchu"
            @click="deleteItem(item.id)"
          ></span>
        </div>
        <div class="content">
          <div class="text">{{ item.title }}</div>
          <div class="video">
            <img :src="item.fileCover" alt="" />
          </div>
          <div class="file-type">
            <span class="text">{{ item.file_name?.split('.')[1] }}</span>
            <span class="time">{{ item.createDate }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination" v-if="total > 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <span class="total">{{$t('共')}}{{ total }}{{$t('条')}}</span>
    </div>
  </el-scroll>
</template>

<script>
import { getKnowledge, deleteKnowledge  } from '@/api/index';
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
  name: 'Vedio',
  props: {
    refresh: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 12,
      size: 'default',
      disabled: false,
      background: true,
      list: [],
    };
  },
  created() {
    this.fetchData();
  },
  watch: {
    refresh: {
      handler(nv){
        if(nv){
          this.currentPage = 1;
          this.list = [];
          this.fetchData();
        }
      }
    }
  },
  methods: {
    // 获取文件列表
    async fetchData() {
      const params = {
        page: this.currentPage,
        count: this.pageSize,
      };
      try {
        const {data} = await getKnowledge({ ...params }); // 使用封装的 API 请求方法
        if (data.code === 0) {
          this.list = data.data.records; // 更新表格数据
          this.total = +data.data.total; // 更新总数据条数
          this.pageSize = +data.data.size; // 设置每页条数
        }
      } catch (error) {
        console.log(error);
      }
    },

    // 处理分页切换
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchData(); // 刷新文件列表
    },

    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData(); // 刷新文件列表
    },

    // 删除文件
    deleteItem(id) {
      ElMessageBox.confirm(
          this.$t('删除该文件后不能恢复，确定要删除吗？'),
          this.$t('删除确认'),
          {
            confirmButtonText: this.$t('删除'),
            cancelButtonText: this.$t('取消'),
            type: 'warning',
          },
      )
          .then(async () => {
            try {
              const { data } = await deleteKnowledge([id]); // 使用数组传递单个 ID
              if (data.code === 0) {
                ElMessage({
                  type: 'success',
                  message: this.$t('删除成功'),
                });
                this.fetchData(); // 删除后刷新数据
              } else {
                ElMessage({
                  type: 'error',
                  message: this.$t('删除失败，请重新操作'),
                });
              }
            } catch (error) {
              console.log(error);
              ElMessage({
                type: 'error',
                message: this.$t('删除请求失败，请稍后再试'),
              });
            }
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: this.$t('取消删除'),
            });
          });
    }

  },
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  .content-wrapper {
    box-shadow: 20px 20px 30px 0px rgba(0, 0, 0, 0.65);
    width: calc(94% / 4);
    margin-right: 2%;
    height: 300px;
    position: relative;
    border-radius: 32px;
    margin-bottom: 2%;
    @include clear;
    &:nth-of-type(4n) {
      margin-right: 0;
    }
    .border {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      border: 1px solid transparent;
      border-radius: 32px;
      box-sizing: border-box;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      pointer-events: none;
      transition: 0.6s ease;
      background-size: 100% 100%;
    }
    .title {
      width: 100%;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 5;
      box-sizing: border-box;
      padding: 0px 30px;
      margin-bottom: 16px;
      margin-top: 30px;
      .t1 {
        font-weight: 500;
        font-size: 18px;
        color: #fff;
        @include elli;
      }
      .iconfont {
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: 0.3s ease;
        &:hover {
          color: $color;
        }
      }
    }
    .content {
      padding: 0px 30px;
      z-index: 2;
      position: relative;
      .text {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
      }
      .video {
        width: 100%;
        height: 110px;
        background: #353535;
        border-radius: 16px 16px 16px 16px;
        z-index: 2;
        position: relative;
        margin: 16px 0;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .file-type {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .text,
        .time {
          font-weight: 400;
          font-size: 12px;
          color: #7d7d7d;
        }
      }
    }
    &:hover {
      .border {
        background-size: 100% 300%;
      }
    }
  }

  .green {
    .border {
      background-image: linear-gradient(24deg, #000 55%, rgb(31, 52, 45)),
        linear-gradient(24deg, #000 55%, #1fd267);
    }
  }
}
</style>
